<template>
  <div class="hoem">
    <div class="search_box">
      <div class="add">
        <img class="auto_img" src="../assets/douguologo.webp" alt="" />
      </div>
      <div class="search">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          @focus="sousuo"
        />
      </div>
      <div class="inform" @click="btn2">
        <img src="../assets/tongzhi.png" />
      </div>
    </div>

    <div>
      <van-tabs v-model="active" color="#FFC930" @click="togo(active)" swipeable>
        <van-tab
          v-for="(item, index) in toptabdata"
          :key="index"
          :title="item.topvan_title"
        >
          <div>
            <van-pull-refresh
              v-model="isLoading"
              @refresh="onRefresh"
              style="min-height: 100vh"
            >
              <div class="nav_box">
                <router-view></router-view>
              </div>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  name: "Hoem",
  data() {
    return {
      active: 1,

      count: 0,
      isLoading: false,
      value: "",
      toptabdata: [
        {
          topvan_title: "关注",
          topgoname: "attention",
        },
        {
          topvan_title: "推荐",
          topgoname: "recommend",
        },
        {
          topvan_title: "视频",
          topgoname: "shipin",
        },
      ],
    };
  },
  methods: {
    gobtn(index) {
      console.log(index);
    },

    sousuo() {
      this.$router.push({ name: "search" });
    },
    btn2() {
      let getuser = localStorage.getItem("codeok");
      if (!getuser) {
        this.$router.push({ name: "register" });
      } else {
        if (getuser == 200) {
          this.$router.push({ name: "message" });
        } else {
          return;
        }
      }
    },
    togo(index) {
      // let name = this.toptabdata[index].topgoname;
      //   console.log(name);
      //跳转二级路由
      this.$router.push({ name: this.toptabdata[index].topgoname });
      localStorage.setItem("historyindex", JSON.stringify(index));
    },

    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    fun() {
      let getindex = JSON.parse(localStorage.getItem("historyindex"));
      if (getindex == null) {
        return;
      }
      this.active = getindex;
      this.$router.push({ name: this.toptabdata[getindex].topgoname });
    },
  },
  created() {
    this.fun();
  },
};
</script>

<style lang="less" scoped>
.hoem {
  position: relative;
  width: 100%;
  position: fixed;
  top: 0px;
}
.search_box {
  position: relative;
}
.search {
  width: 80%;
  margin-left: 10%;
}
.add {
  position: absolute;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  background-color: #feca2d;
  border-radius: 50px;
  margin-top: 15px;
  margin-left: 10px;
}
.fenlei {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 40px;
  top: 15px;
}
.sousuo {
  position: absolute;
  width: 45px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  right: 70px;
  top: 12px;
  // color: #FECA2D;
  border-radius: 10px;
  border: 1px solid #feca2d;
  background-color: #feca2d;
}
.inform {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 10px;
  top: 15px;
}
.nav_box {
  width: 100%;
  height: 100%;
  // background-color: pink;
}
.auto_img {
  width: 100%;
  display: block;
}
</style>